<link rel="stylesheet" type="text/css" media="all"
	href="@{'public/stylesheets/layout_produto.css'}">
<link type="text/css" rel="stylesheet"
	href="@{'/public/stylesheets/layout_caixinha.css'}" />


<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript">

function open_modal( id ){  
    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();  
      
    $('#mask').css({'width':maskWidth,'height':maskHeight});  
  
    $('#mask').fadeIn(1000);      
    $('#mask').fadeTo("slow",0.8);    
      
    //Get the window height and width  
    var winH = $(window).height();  
    var winW = $(window).width();  
                
    $(id).css('top',  winH/2-$(id).height()/2);  
    $(id).css('left', winW/2-$(id).width()/2);  
    $(id).fadeIn(2000);   
};  
$(document).ready(function() {    
      
    $('a[name=modal]').click(function(e) {  
        e.preventDefault();  
        open_modal( $(this).attr('href') );   
    });  

    $('.window .close').click(function (e) {  
        e.preventDefault();  
          
        $('#mask').hide();  
        $('.window').hide();

        
    });       
      
    $('#mask').click(function () {  
        $(this).hide();  
        $('.window').hide();  
    });  
}); 

function escolhe_modal( id ){
	if (id == 0){
		open_modal('#dialog0');
	}	
	if (id == 1){
		open_modal('#dialog1');
	}
	if (id == 2){
		open_modal('#dialog2');
	}
	if (id == 3){
		open_modal('#dialog3');
	}
	if (id == 4){
		open_modal('#dialog4');
	}
	if (id == 5){
		open_modal('#dialog5');
	}
}


</script>

<div id="mensagem">
	#{ifnot produtos} <a id="nextPage" href="${page+1}"></a> <a
		id="downPage" href="${page-1}"></a>
	<p>Por enquanto só temos essas novidades...Aguarde, traremos muito
		mais!!!</p>

	#{/ifnot} #{else}

</div>

<div id="menu_prod">

	<h3>>> Categorias</h3>
	<a class="link_prod" href="">Colares</a> <a class="link_prod" href="">Pulseiras</a>
	<br />

	<h3>>> Filtro</h3>
	<select>
		<option value="">R$ 5,00 - R$ 10,00</option>
		<option value="">R$ 10,00 - R$ 20,00</option>
		<option value="">R$ 20,00 - R$ 30,00</option>
		<option value="">Acima de R$ 30,00</option>
	</select> <a href=""><img id="botaofiltro"
		src="../../../public/images/botaofiltro.png" /></a>

</div>

<div id="centro" align="center">


	<a id="nextPage" href="${page+1}"></a> <a id="downPage"
		href="${page-1}"></a>




	<div class="imagens">

		#{list contador, as:'contador'}

		<table align="left">
			<tr>
				<td><a id="prod" name="modal"
					onClick="escolhe_modal(${contador})" href=""><img id="prod_img"
						src="@{imagemProduto(produtos[contador].id)}" /></br> <span>${produtos[contador].nome}</span><br />
						<span>R$ ${valores[contador]}</span><br /> <a href=""
						onClick="escolhe_modal(${contador})" name="modal" id="visualizar"></a></td>
			</tr>
		</table>

		#{/list}

	</div>

	<div id="boxes">


		#{form @Clientes.addProduto(), name:'form_modal0', id:'form_modal0'}
		<div id="dialog0" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[0].id)}" />
			<h4>${produtos[0].nome}</h4>
			<h6>${produtos[0].descricao}</h6>
			<h4>R$ ${valores[0]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[0].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				type="image" id="adicionar"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{if produtos.size()>1} #{form @Clientes.addProduto(),
		name:'form_modal1', id:'form_modal1'}
		<div id="dialog1" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[1].id)}" />
			<h4>${produtos[1].nome}</h4>
			<h6>${produtos[1].descricao}</h6>
			<h4>R$ ${valores[1]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[1].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>2} #{form @Clientes.addProduto(),
		name:'form_modal2', id:'form_modal2'}
		<div id="dialog2" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[2].id)}" />
			<h4>${produtos[2].nome}</h4>
			<h6>${produtos[2].descricao}</h6>
			<h4>R$ ${valores[2]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[2].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>3} #{form @Clientes.addProduto(),
		name:'form_modal3', id:'form_modal3'}
		<div id="dialog3" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[3].id)}" />
			<h4>${produtos[3].nome}</h4>
			<h6>${produtos[3].descricao}</h6>
			<h4>R$ ${valores[3]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[3].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>4} #{form @Clientes.addProduto(),
		name:'form_modal4', id:'form_modal4'}
		<div id="dialog4" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[4].id)}" />
			<h4>${produtos[4].nome}</h4>
			<h6>${produtos[4].descricao}</h6>
			<h4>R$ ${valores[4]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[4].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>5} #{form @Clientes.addProduto(),
		name:'form_modal5', id:'form_modal5'}
		<div id="dialog5" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{imagemProduto(produtos[5].id)}" />
			<h4>${produtos[5].nome}</h4>
			<h6>${produtos[5].descricao}</h6>
			<h4>R$ ${valores[5]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[5].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if}


		<!-- Máscara para cobrir a tela -->
		<div id="mask"></div>

	</div>




	#{/else}